<template>
  <u-form-item :label="label">
    <text :style="style">
			<text v-for="(t, i) in textArray" :key="i" class="__link">
				<u-link type="primary" :href="linkArray[i]" :text="t" ></u-link>
			</text>
    </text>
  </u-form-item>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useProps } from '../hooks/props'

const props = defineProps<{ data: Record<string, any>; form: Record<string, any> }>()
const { label, labelWidth } = useProps(props)
const textArray = computed(() => {
  const t = props.data.text
  if (t) {
    return t.split('\n')
  } else {
    return []
  }
})
const linkArray = computed(() => {
  const l = props.data.link
  if (l) {
    const hrefArray = l.split('\n')
    return hrefArray.map((h: string) => (!/^(?:http(s)?:\/\/)/.test(h) ? `http://${h}` : h))
  } else {
    return []
  }
})
const style = computed(() => {
  if (textArray.value.length > 1) {
    return { marginTop: '8rpx' }
  } else {
    return { marginTop: '-4rpx' }
  }
})
</script>

<style lang="scss" scoped>
:deep(.__link) {
  line-height: 20px;
  .el-link {
    line-height: 20px;
    .el-link__inner {
      line-height: 20px;
    }
  }
}
</style>
